<!-- pages/components/image/image.vue -->
<template>
	<view class="wrapper">
		<view class="title">默认 (scaleToFill) - "压扁了"</view>
		<view class="img-box">
			<image :src="img" mode="scaleToFill"></image>
		</view>
		
		<view class="title">aspectFit - "完整显示" (有留白)</view>
		<view class="img-box">
			<image :src="img" mode="aspectFit"></image>
		</view>
		
		<view class="title">aspectFill - "裁剪填满" (不留白)</view>
		<view class="img-box">
			<image :src="img" mode="aspectFill"></image>
		</view>
		
		<view class="title">widthFix - "宽度100%, 高度自适应"</view>
		<!-- 这种模式盒子一般不设固定高度 -->
		<image :src="img" mode="widthFix" style="width: 100%; border: 1px solid #eee;"></image>
	</view>
</template>

<script>
    export default {
        data() {
            return {
                img: ""
          }
        }
    }
</script>

<style>
.wrapper {
	padding: 15px;
}
.title {
	font-size: 16px;
	font-weight: bold;
	padding: 10px 0;
	margin-top: 10px;
}
/* 给一个固定的方盒子 */
.img-box {
	width: 200px;
	height: 120px;
	border: 2px solid #f0ad4e;
	background-color: #f4f4f4;
}
.img-box image {
	width: 100%;
	height: 100%;
}
</style>